<template>
	<view class="certificate_pop">
		<view @click="hide" v-show="show" class="u-text-right u-p-r-30 u-p-t-20 iconClose" style="position:fixed;top:30px;right:26px;z-index:100000">
			<u-icon name="close" size="36" color="#d0d0d0"></u-icon>
		</view>
		<u-popup v-model="show" mode="center">
			<view > 
				<swiper duration="500" :circular="true" class="certificate_pop_swiper" :indicator-dots="true">
					<swiper-item v-for="result in result" :key="result.pkid" style="width:100%;height:100%;">
						<view class="commen content" v-if="result.type === 1">
							<u-image class="image" src="/static/img/loveforest/cer_tree.png" width="100%" height="750" mode=""></u-image>
							<view class="title">植树证书</view>
							<view class="name">
								<span class="text">{{result.userName}}，</span>
								<span>谢谢您！</span>
							</view>
							<view class="text">
								于<span class="color">{{result.plantDate}}</span>申请种植的{{result.plantTreeName}}，已被荣程基金会认领，将种植到{{result.city === "市辖区" ?result.province: result.city }}地区。
							</view>
							<view class="btn">
								<u-button @click="checkTree(result.gardenId)" style="background:#fff;border:1px solid #66bc7c;color:#66BC7C;height:32px;" shape="circle" plain>
									查看{{result.gardenName}}
								</u-button>
							</view>
							<view class="number">树苗编号</view>
							<view>
								<u-button style="background:#BBE3C2;color:#66BC7C;height:32px;" shape="circle" plain
								>
									{{result.certificateNum}}
								</u-button>
							</view>
							<view class="logo u-m-t-40 u-text-center u-flex u-p-l-50 u-p-r-50" style="justify-content: center;" v-if="result.url">
								<u-image  class="img" :src="$u.http.config.baseUrl + (JSON.parse(result.url)[0].url)" width="100" height="100" mode=""></u-image>
								<u-image v-if="JSON.parse(result.url)[1]"  class="img u-m-l-10" :src="$u.http.config.baseUrl + (JSON.parse(result.url)[1].url)" width="100" height="100" mode=""></u-image>
							</view>
							<view class="have" v-if="result.isSeal == 1">
								<u-image class="img" :src="$u.http.config.baseUrl + (JSON.parse(result.sealUrl)[0].url)" width="150" height="130" mode=""></u-image>
							</view>
						</view>
						<view class="commen content1" v-if="result.type === 2">
							<u-image class="image" src="/static/img/loveforest/cer_tree1.png" width="100%" height="750" mode=""></u-image>
							<view class="title">守护证书</view>
							<view class="name">
								<span class="text">{{result.userName}}，</span>
								<span>谢谢您！</span>
							</view>
							<view class="text" style="max-height:110px;overflow:auto">
								于<span class="color">{{result.guardDate}}</span>捐赠<span class="bold">{{result.energy}}g</span>能量，将用于守护<span class="bold">{{result.city==result.province? result.province: result.province+''+ result.city}}</span>
								{{result.household}}家的<span>{{result.year}}年</span>{{result.plantTreeName}}。守护期限<span class="bold">{{result.beginMonth}} - {{result.endMonth}}</span>,由<span class="bold">{{result.sponsor}}</span>守护。
							</view>
							<view class="number">树苗编号</view>
							<view class="u-p-t-10">
								<u-button style="background:#CBCBE6;color:#5D6291;height:32px;" shape="circle" plain>
									{{result.certificateNum}}
								</u-button>
							</view>
							<view class="logo u-p-t-40 u-flex u-p-l-50 u-p-r-50" style="justify-content: center;">
								<u-image  class="img" :src="$u.http.config.baseUrl + (JSON.parse(result.url)[0].url)" width="100" height="100" mode=""></u-image>
								<u-image v-if="JSON.parse(result.url)[1]"  class="img u-m-l-10" :src="$u.http.config.baseUrl + (JSON.parse(result.url)[1].url)" width="100" height="100" mode=""></u-image>
							</view>
							<view class="have" v-if="result.isSeal == 1">
								<u-image class="img" :src="$u.http.config.baseUrl + (JSON.parse(result.sealUrl)[0].url)" width="140" height="120" mode=""></u-image>
							</view>
						</view>
						<view class="commen content2" v-if="result.type === 3">
							<u-image class="image" src="/static/img/loveforest/medal2.png" width="100%" height="750" mode=""></u-image>
							<view class="name">
								<span class="text">{{result.userName}}，</span>
								<span class="color" style="color:#66BC7C;white-space: nowrap;font-size: 10px;">(编号：{{result.medalNum}})</span>
							</view>
							<view class="text center u-font-28">
								恭喜您成为<span class="color">第{{result.num}}位</span>植树贡献者，感谢您为绿色环保做出贡献，这是属于您的植树勋章。
							</view>
							<view style="color:#CCCCCC;" class="u-text-center u-font-24">·爱护环境 ，建设美丽家园 ·</view>
							<view class="logo u-p-t-40 u-text-center">
								<u-image class="img" :src="$u.http.config.baseUrl+ (JSON.parse(result.logoUrl)[0].url)" width="80" height="80" mode=""></u-image>
								<u-image v-if="JSON.parse(result.logoUrl)[1]"  class="img u-m-l-50" :src="$u.http.config.baseUrl + (JSON.parse(result.logoUrl)[1].url)" width="80" height="80" mode=""></u-image>
							</view>
						</view>
						<view class="commen content2 content3" v-if="result.type === 4">
							<u-image class="image" src="/static/img/loveforest/medal5.png" width="100%" height="750" mode=""></u-image>
							<view class="name">
								<span class="text">{{result.userName}}，</span>
								<span class="color" style="color:#3F406B;white-space: nowrap;font-size: 10px;">(编号：{{result.medalNum}})</span>
							</view>
							<view class="text center u-font-28">
								恭喜您成为<span class="color">第{{result.num}}位</span>守护者，感谢您为绿色环保做出贡献，这是属于您的守护勋章。
							</view>
							<view style="color:#CCCCCC;" class="u-text-center u-font-24">·爱护环境 ，建设美丽家园 ·</view>
							<view class="logo u-p-t-40 u-text-center">
								<u-image class="img u-m-r-20" :src="$u.http.config.baseUrl+ (JSON.parse(result.logoUrl)[0].url)" width="90" height="80" mode=""></u-image>
								<u-image v-if="JSON.parse(result.logoUrl)[1]"  class="img u-m-l-50" :src="$u.http.config.baseUrl + (JSON.parse(result.logoUrl)[1].url)" width="80" height="80" mode=""></u-image>
							</view>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:["show","result"],
		data() {
			return {
				showModal: false,
			};
		},
		mounted() {
			console.log(this.result)
			this.showModal = this.show
		},
		methods: {
			checkTree(id) {
				console.log(this.result)
				this.$u.route('pages/work/apply/loveforest/personal_garden/achievement/achievement_detail',{id:id})
			},
			hide () {
				this.$emit("close")
			},
		},
		watch: {
			show (val) {
				this.showModal = val
			}
		}
	}
</script>

<style lang="scss">
	.commen {
		height: 390px;
		width: 95%;
		padding: 30px 26px 0px 26px;
		position:relative;
		.image {
			position:absolute;
			top:0;
			left:0;
			z-index:-1;
		}
		.title {
			text-align: center;
			font-weight: 600;
			color: #6F5B45;
			font-size: 32rpx;
			padding-bottom: 10px;
		}

		.name {
			padding-bottom: 10px;

			span {
				color: #5B6162;
				font-size: 28rpx;
			}

			.text {
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
			}
		}

		.text {
			color: #999999;
			font-size: 28rpx;
			line-height: 44rpx;
			text-indent: 24px;

			.color {
				color: #ff6851;
			}
		}

		.number {
			padding: 10px 0;
			font-size: 22rpx;
			color: #999999;
		}

		.btn {
			padding-top: 16px;
			width: 70%;
			margin: 0 auto;
		}

		.logo {
			padding-top: 6px;

			.img {
				margin: 0 auto;
			}
		}

		.have {
			position: absolute;
			bottom: 40px;
			right: 30px;
			z-index: 1000;
		}
	}

	// .content {
	// 	background: url("/static/img/loveforest/cer_tree.png");
	// 	background-size: cover;
	// }

	.content1 {
		// width:260px;
		// background: url("/static/img/loveforest/cer_tree1.png");
		// background-size: contain;
		.bold {
			font-weight: bold;
			color:#333333;
		}
	}
	.content2{
		// background: url("/static/img/loveforest/medal2.png");
		// background-size: cover;
		padding-top: 110px;
		.center {
			height: 100px;
		}
		.logo {
			width: 60%;
			margin: 0 auto;
			text-align:center;
			.img {
				display: inline-block;
			}
		}
	}
	.content3{
		// background: url("/static/img/loveforest/medal5.png");
		// background-size: cover;
	}
	/deep/ .certificate_pop .u-mode-center-box {
		background: transparent!important;
	}
	.certificate_pop_swiper {
		width: 300px;
		height: 450px;
		position:relative;
		left: 16px;
		top: 30px;
		/deep/ .uni-swiper-dots {
			left:45%;
			.uni-swiper-dot {
				background: #ccc;
			}
			.uni-swiper-dot-active {
				background: #2B85E4 
			}
		}
	}
</style>
